<?php echo $header; ?>
<div id="content">
<div class="breadcrumb">
  <?php foreach ($breadcrumbs as $breadcrumb) { ?>
  <?php echo $breadcrumb['separator']; ?><a href="<?php echo $breadcrumb['href']; ?>"><?php echo $breadcrumb['text']; ?></a>
  <?php } ?>
</div>
<?php if ($success) { ?>
  <div class="success"><?php echo $success; ?></div>
<?php } ?>
<?php if ($error_warning) { ?>
<div class="warning"><?php echo $error_warning; ?></div>
<?php } ?>
<div class="box">
	<div class="heading">
		<h1><span class="icon-cogs"></span><?php echo $heading_title; ?></h1>
		<div class="buttons" style="padding-top: 5px;">
		<script>
			function treodenImport(obj){
				$(obj).parent().children('#import-form').show();
				$(obj).remove();
			}
		</script>
		<form style="float:left;margin-right:10px;margin-bottom:0px;display:none" action="<?php echo $import_action;?>" method="post" enctype="multipart/form-data" id="import-form">
			<input type="file" name="file" />
			<input type="hidden" name="store_id" value="<?php echo $this->request->get['store_id'];?>" />
			<input class="btn btn-primary" type="submit" value="Submit"/>
		</form>
		<a style="margin-right:10px" class="import btn btn-primary" onclick="treodenImport(this);">Import</a>
		<a style="margin-right:10px" class="export btn btn-primary" onclick="javascript:void(0);">Export</a>
		<a onclick="javascript : treodensubmitform();" class=" btn btn-primary" style="margin-right:10px"><?php echo $button_save; ?></a>
		<a onclick="location = '<?php echo $cancel; ?>';" class="btn btn-danger"><?php echo $button_cancel; ?></a>
		</div>
		<script>
			$('.export').click(function(){
				$('#loading').show();
				$.post(  
					"<?php echo $this->url->link('module/treoden_cpanel/ajaxExport')."&token=".$this->session->data['token']."&store_id=".$this->request->get['store_id'];?>",  
					function(responseText){
						$('#loading').hide();
						if(responseText.indexOf("You have no permission") != -1)
							alert(responseText);
						else	
							window.open(responseText);
					}
				);  
			})
		</script>
	</div>
	<div class="content">	
		<div id="form-validate-errors"></div>
		<div id="tabs" class="vtabs">
			<a href="#tab-general"><small class="icon-settings"></small><?php echo $tab_general; ?></a>
			<a href="#tab-body"><small class="icon-settings"></small><?php echo $tab_body; ?></a>
			<a href="#tab-header"><small class="icon-settings"></small><?php echo $tab_header; ?></a>
			<a href="#tab-menu"><small class="icon-menu2"></small><?php echo $tab_menu; ?></a>
			<a href="#tab-footer"><small class="icon-settings"></small><?php echo $tab_footer; ?></a>
			<a href="#tab-products-block"><small class="icon-loop"></small><?php echo $tab_products_block; ?></a>
			<a href="#tab-product"><small class="icon-settings"></small><?php echo $tab_product_item; ?></a>
			<a href="#tab-category-page"><small class="icon-settings"></small><?php echo $tab_category_page; ?></a>
			<a href="#tab-product-page"><small class="icon-settings"></small><?php echo $tab_product_page; ?></a>
			<a href="#layout-config"><small class="icon-insert-template"></small><?php echo $layout_config; ?></a>
			<a href="#specia-offers-popup"><small class="icon-settings"></small><?php echo $special_offers; ?></a>
		</div>
		<div id="left-panel">
		<form action="<?php echo $action; ?>" method="post" enctype="multipart/form-data" id="form">
			<div id="tab-general">
						<div class="accordion">
							<h3>Color Scheme</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="primary_color">Primary Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $primary_color;?>" type="text" value="<?php echo $primary_color;?>" name="primary_color" id="primary_color" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#primary_color');
										})
									</script>
								</div>
								<div class="span3">
									<label for="secondary_color">Secondary Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $secondary_color;?>" type="text" value="<?php echo $secondary_color;?>" name="secondary_color" id="secondary_color" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#secondary_color');
										})
									</script>
								</div>
								<div class="span3">
									<label for="border_color">Border Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $border_color;?>" type="text" value="<?php echo $border_color;?>" name="border_color" id="border_color" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#border_color');
										})
									</script>
								</div>
								</div>
							</div>
							<h3>Block Heading</h3>
							<div>
								<div class="row-fluid">
									<div class="span3">
										<label for="font_of_bar_title">Font Family of Title</label>
										<select name="font_of_bar_title" id="font_of_bar_title">
											<?php echo $google_font_of_bar_title;?>
										</select>
									</div>
									<div class="span3">
										<label for="color_of_bar_title">Color of Title</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_bar_title;?>" type="text" value="<?php echo $color_of_bar_title;?>" name="color_of_bar_title" id="color_of_bar_title" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_bar_title');
											})
										</script>
									</div>
									<div class="span3">
										<label for="font_style_of_bar_title">Font Style Of Title</label>
										<select name="font_style_of_bar_title" id="font_style_of_bar_title">
											<option value="regular" <?php if($font_style_of_bar_title=='regular') echo "selected='selected'";?>>Regular</option>
											<option value="bold" <?php if($font_style_of_bar_title=='bold') echo "selected='selected'";?>>Bold</option>
											<option value="italic" <?php if($font_style_of_bar_title=='italic') echo "selected='selected'";?>>Italic</option>
											<option value="bold-italic" <?php if($font_style_of_bar_title=='bold-italic') echo "selected='selected'";?>>Bold Italic</option>
										</select>
									</div>
									<div class="span3">
											<label for="font_size_of_bar_title">Font Size of Title</label>
											<div class="form-group right-glyphicon">
											<input type="text" name="font_size_of_bar_title" value="<?php echo $font_size_of_bar_title;?>" id="font_size_of_bar_title" />
											<span class="form-glyphicon">px</span>
											</div>
									</div>
								</div>
								<div class="row-fluid">
									<div class="span3">
										<label for="color_of_bar_backround_top">Gradient Background Color Top</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_bar_backround_top;?>" type="text" value="<?php echo $color_of_bar_backround_top;?>" name="color_of_bar_backround_top" id="color_of_bar_backround_top" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_bar_backround_top');
											})
										</script>
									</div>
									<div class="span3">
										<label for="color_of_bar_backround_bottom">Gradient Background Color Bottom</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_bar_backround_bottom;?>" type="text" value="<?php echo $color_of_bar_backround_bottom;?>" name="color_of_bar_backround_bottom" id="color_of_bar_backround_bottom" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_bar_backround_bottom');
											})
										</script>
									</div>
									<div class="span3">
										<label for="height_of_bar">Height</label>
										<div class="form-group right-glyphicon">
										<input type="text" name="height_of_bar" value="<?php echo $height_of_bar;?>" id="height_of_bar" />
										<span class="form-glyphicon">px</span>
										</div>
									</div>
								</div>
								<div class="row-fluid">
									
								</div>
							</div>
							<h3>Button</h3>
							<div>
								<div class="row-fluid">
									<div class="span3">
										<label for="font_of_button_text">Font Family of Text</label>
										<select name="font_of_button_text" id="font_of_button_text">
											<?php echo $google_font_of_button_text;?>
										</select>
									</div>
									<div class="span3">
										<label for="font_style_of_button_text">Font Style Of Text</label>
										<select name="font_style_of_button_text" id="font_style_of_button_text">
											<option value="regular" <?php if($font_style_of_button_text=='regular') echo "selected='selected'";?>>Regular</option>
											<option value="bold" <?php if($font_style_of_button_text=='bold') echo "selected='selected'";?>>Bold</option>
											<option value="italic" <?php if($font_style_of_button_text=='italic') echo "selected='selected'";?>>Italic</option>
											<option value="bold-italic" <?php if($font_style_of_button_text=='bold-italic') echo "selected='selected'";?>>Bold Italic</option>
										</select>
									</div>
									<div class="span3">
										<label for="color_of_button_text">Color of Text</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_button_text;?>" type="text" value="<?php echo $color_of_button_text;?>" name="color_of_button_text" id="color_of_button_text" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_button_text');
											})
										</script>
									</div>
									<div class="span3">
											<label for="font_size_of_button_text">Font Size of Text</label>
											<div class="form-group right-glyphicon">
											<input type="text" name="font_size_of_button_text" value="<?php echo $font_size_of_button_text;?>" id="font_size_of_button_text" />
											<span class="form-glyphicon">px</span>
											</div>
									</div>
								</div>
								<div class="row-fluid">
									<div class="span3">
										<label for="color_of_button_backround_top">Gradient Background Top</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_button_backround_top;?>" type="text" value="<?php echo $color_of_button_backround_top;?>" name="color_of_button_backround_top" id="color_of_button_backround_top" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_button_backround_top');
											})
										</script>
									</div>
								</div>
								<div class="row-fluid">
									<div class="span3">
										<label for="color_of_button_backround_bottom">Gradient Background Bottom</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_button_backround_bottom;?>" type="text" value="<?php echo $color_of_button_backround_bottom;?>" name="color_of_button_backround_bottom" id="color_of_button_backround_bottom" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_button_backround_bottom');
											})
										</script>
									</div>
								</div>
							</div>
							<h3>Button When Hover</h3>
							<div>
								<div class="row-fluid">
									<div class="span3">
										<label for="color_of_button_text_hover">Color of Text</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_button_text_hover;?>" type="text" value="<?php echo $color_of_button_text_hover;?>" name="color_of_button_text_hover" id="color_of_button_text_hover" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_button_text_hover');
											})
										</script>
									</div>
								</div>
								<div class="row-fluid">
									<div class="span3">
										<label for="color_of_button_backround_top_hover">Gradient Background Top</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_button_backround_top_hover;?>" type="text" value="<?php echo $color_of_button_backround_top_hover;?>" name="color_of_button_backround_top_hover" id="color_of_button_backround_top_hover" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_button_backround_top_hover');
											})
										</script>
									</div>

									
								</div>
								<div class="row-fluid">
									<div class="span3">
										<label for="color_of_button_backround_bottom_hover">Gradient Background Bottom</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_button_backround_bottom_hover;?>" type="text" value="<?php echo $color_of_button_backround_bottom_hover;?>" name="color_of_button_backround_bottom_hover" id="color_of_button_backround_bottom_hover" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_button_backround_bottom_hover');
											})
										</script>
									</div>
								</div>
							</div>
							<h3>Link</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="link_color">Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $link_color;?>" type="text" value="<?php echo $link_color;?>" name="link_color" id="link_color" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#link_color');
										})
									</script>
								</div>
								<div class="span3">
									<label for="link_color_hover">Hover Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $link_color_hover;?>" type="text" value="<?php echo $link_color_hover;?>" name="link_color_hover" id="link_color_hover" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#link_color_hover');
										})
									</script>
								</div>
								</div>
							</div>
							<h3>Html Heading ( H1,H2,H3 ...)</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="html_heading_color">Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $html_heading_color;?>" type="text" value="<?php echo $html_heading_color;?>" name="html_heading_color" id="html_heading_color" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#html_heading_color');
										})
									</script>
								</div>
								<div class="span3">
										<label for="font_of_html_heading">Font Family</label>
										<select name="font_of_html_heading" id="font_of_html_heading">
											<?php echo $font_of_html_heading;?>
										</select>
								</div>
								</div>
							</div>
							<h3>Custom Css </h3>
							<div>
								<div class="row-fluid">
									<div class="">
										<label for="custom_css">Write your css code (Without '&lt;style&gt;&lt;/style&gt;' tag)</label>
										<textarea style="height:300px;width:400px" id="custom_css" name="custom_css"><?php echo $custom_css;?></textarea>
									</div>
								</div>
							</div>
						</div>
			</div>
			<div id="tab-body">
					<div class="accordion">
							<h3>Style</h3>
							<div>
								<div class="row-fluid">
									<div class="span3">
										<label for="main_width">Main Width</label>
										<div class="form-group right-glyphicon">
										<input name="main_width" type="text" class="main_width" id="main_width" placeholder="1180" value="<?php echo $main_width;?>" />							
										<span class="form-glyphicon">px</span>
										</div>
									</div>
									<div class="span3">
										<label for="main-style">Main Style</label>	
										<select name="wide_boxed" class="main-style" id="main-style" >
											<option value="wide" <?php if($wide_boxed=='wide') echo "selected='selected'";?>>Wide</option>
											<option value="boxed" <?php if($wide_boxed=='boxed') echo "selected='selected'";?>>Boxed</option>
										</select>
									</div>
									<div class="span3">
										<label for="main-style">Full slideshow mode ?</label>
										<div class="radio">
										  <label>
											<input id="full_slide_show_mode_yes" type="radio" name="full_slide_show_mode" value="yes" <?php if($full_slide_show_mode=='yes') echo "checked='checked'";?>/>Yes 
										  </label>
										  <label>
											<input data-hide="full_slide_show_mode_yes" id="full_slide_show_mode_no" type="radio" name="full_slide_show_mode" value="no" <?php if($full_slide_show_mode=='no') echo "checked='checked'";?>/>No
										  </label>
										</div>								
									</div>
								</div>
								<div class="row-fluid">
									<div class="span3 full_slide_show_mode_yes dependent">
										<label for="main-style">Image Resource For Slideshow</label>
										<?php 
											$this->load->model('design/banner');
											$banners = $this->model_design_banner->getBanners();
										?>
										
										  <select name="image_full_resource" class="image_full_resource" id="image_full_resource" >
											<?php foreach($banners as $banner) : ?>
												<?php if($banner['status']==1) : ?>
												<option value="<?php echo $banner['banner_id'];?>" <?php if($image_full_resource==$banner['banner_id']) echo "selected='selected'";?>><?php echo $banner['name'];?></option>
												<?php endif;?>
											<?php endforeach;?>
											</select>
																
									</div>
									<div class="span3 full_slide_show_mode_yes dependent">
										<label for="slide_interval">Length between transitions</label>
										<div class="form-group left-glyphicon">
										<input name="slide_interval" type="text" class="slide_interval" id="slide_interval" placeholder="3000" value="<?php echo $slide_interval;?>" />						
										<span class="form-glyphicon">m.s</span>
										</div>
									</div>
									<div class="span3 full_slide_show_mode_yes dependent">
										<label for="slide_transition">Transition</label>
										
											<select name="slide_transition" class="slide_transition" id="slide_transition" >
												<option value="1" <?php if($slide_transition==1) echo "selected='selected'";?>>Fade</option>
												<option value="2" <?php if($slide_transition==2) echo "selected='selected'";?>>Slide Top</option>
												<option value="3" <?php if($slide_transition==3) echo "selected='selected'";?>>Slide Right</option>
												<option value="4" <?php if($slide_transition==4) echo "selected='selected'";?>>Slide Bottom</option>
												<option value="5" <?php if($slide_transition==5) echo "selected='selected'";?>>Slide Left</option>
												<option value="6" <?php if($slide_transition==6) echo "selected='selected'";?>>Carousel Right</option>
												<option value="7" <?php if($slide_transition==7) echo "selected='selected'";?>>Carousel Left</option>
											</select>
										
									</div>
									<div class="span3 full_slide_show_mode_yes dependent">
										<label for="transition_speed">Speed of transition</label>
										<div class="form-group right-glyphicon">
										<input name="transition_speed" type="text" class="transition_speed" id="transition_speed" placeholder="700" value="<?php echo $transition_speed;?>" />						
										<span class="form-glyphicon">m.s</span>
										</div>
									</div>
								</div>
							</div>
							<h3>Font</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="font_family">Font Family</label>
									<select name="font_family" class="font_family" id="font_family" >
										<?php echo $google_font_body;?>
									</select>
								</div>
								<div class="span3">
									<label for="font_size">Font Size</label>
									<div class="form-group right-glyphicon">
									<input id="font_size" type="text" name="font_size" value="<?php echo $font_size;?>" />
									<span class="form-glyphicon">px</span>
									</div>
								</div>
								<div class="span3">
									<label for="font_color">Font Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $font_color;?>" type="text" value="<?php echo $font_color;?>" name="font_color" id="font_color" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#font_color');
										})
									</script>
								</div>
								</div>
							</div>
							<h3>Body Backgound</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
								<div class="image"><img src="<?php echo $background_image_url;?>" alt="" id="background_image" />
								  <input type="hidden" name="background_image" value="<?php echo $background_image; ?>" id="background-image" />
								  <br />
								  <a onclick="image_upload('background-image', 'background_image');">Browser</a>&nbsp;&nbsp;|&nbsp;&nbsp;<a onclick="$('#background_image').attr('src', '<?php echo $no_image; ?>'); $('#background-image').attr('value', '');">Clear</a>
								</div>
								</div>
								<div class="span3">
								<div class="form-group">
									<label for="background_position">Background Position</label>
									<select name="background_position" id="background_position">
										<option value="top-left" <?php if($background_position=='top-left') echo "selected='selected'";?>>Top Left</option>
										<option value="top-right" <?php if($background_position=='top-right') echo "selected='selected'";?>>Top Right</option>
										<option value="top-center" <?php if($background_position=='top-center') echo "selected='selected'";?>>Top Center</option>
										<option value="center-left" <?php if($background_position=='center-left') echo "selected='selected'";?>>Center Left</option>
										<option value="center-right" <?php if($background_position=='center-right') echo "selected='selected'";?>>Center Right</option>
										<option value="center-center" <?php if($background_position=='center-center') echo "selected='selected'";?>>Center Center</option>
										<option value="bottom-left" <?php if($background_position=='bottom-left') echo "selected='selected'";?>>Bottom Left</option>
										<option value="bottom-right" <?php if($background_position=='bottom-right') echo "selected='selected'";?>>Bottom Right</option>
										<option value="bottom-center" <?php if($background_position=='bottom-center') echo "selected='selected'";?>>Bottom Center</option>
									</select>
								</div>
								</div>								
								<div class="span3">
								<div class="form-group">
									<label for="background_repeat">Repeat ?</label>
									<select name="background_repeat" id="background_repeat">
										<option value="no-repeat" <?php if($background_repeat=='no-repeat') echo "selected='selected'";?>>No Repeat</option>
										<option value="repeat-x" <?php if($background_repeat=='repeat-x') echo "selected='selected'";?>>Repeat X</option>
										<option value="repeat-y" <?php if($background_repeat=='repeat-y') echo "selected='selected'";?>>Repeat Y</option>
										<option value="repeat" <?php if($background_repeat=='repeat') echo "selected='selected'";?>>Repeat</option>
									</select>
								</div>
								</div>
								<div class="span3">
									<label for="background_color">Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $background_color;?>" type="text" value="<?php echo $background_color;?>" name="background_color" id="background_color" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#background_color');
										})
									</script>
								</div>
								</div>
							</div>
							<h3>Container Backgound</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="background_container_color">Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $background_container_color;?>" type="text" value="<?php echo $background_container_color;?>" name="background_container_color" id="background_container_color" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#background_container_color');
										})
									</script>
								</div>
								</div>
							</div>
					</div>
			</div>
			<div id="tab-header">
						<div class="accordion">
							<h3>Display style</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="form-group">
										<label for="header_display_style">Display style</label>
										<select name="header_display_style" id="header_display_style">
											<option value="left-logo" <?php if($header_display_style=='left-logo') echo "selected='selected'";?>>Left Logo</option>
											<option value="center-logo" <?php if($header_display_style=='center-logo') echo "selected='selected'";?>>Center Logo</option>	
										</select>
									</div>
								</div>
								</div>
							</div>
							<h3>Display Language</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="display_language" value="yes" <?php if($display_language=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="display_language" value="no" <?php if($display_language=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Display Currency</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="display_currency" value="yes" <?php if($display_currency=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="display_currency" value="no" <?php if($display_currency=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Display Links</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="display_links" value="yes" <?php if($display_links=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="display_links" value="no" <?php if($display_links=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Display Social Icons</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input id="display_social_icons_yes" type="radio" name="display_social_icons" value="yes" <?php if($display_social_icons=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input data-hide="display_social_icons_yes" id="display_social_icons_no" type="radio" name="display_social_icons" value="no" <?php if($display_social_icons=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
								<div class="row-fluid">
									<div class="span12 display_social_icons_yes dependent">
										<label for="main-style">Social Icons Html</label>
                                        <textarea name='social_icons_html' id="social_icons_html"><?php echo $social_icons_html;?></textarea>
									</div>
								</div>
							</div>
							<h3>Backgound Of Top Header Bar</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="background_top_header_bar_color_header">Background Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $background_top_header_bar_color_header;?>" type="text" value="<?php echo $background_top_header_bar_color_header;?>" name="background_top_header_bar_color_header" id="background_top_header_bar_color_header" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#background_top_header_bar_color_header');
										})
									</script>
								</div>
								</div>
							</div>
							<h3>Backgound</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="background_color_header">Background Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $background_color_header;?>" type="text" value="<?php echo $background_color_header;?>" name="background_color_header" id="background_color_header" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#background_color_header');
										})
									</script>
								</div>
								</div>
							</div>
						</div>
			</div>
			<div id="tab-menu">
						<div class="accordion">
							<h3>Font</h3>
							<div>
								<div class="row-fluid">
									<div class="span3">
										<div class="form-group">
											<label for="menu_font_family">Font Family</label>
											<select name="menu_font_family" id="menu_font_family">
												<?php echo $google_menu_font;?>
											</select>
										</div>
									</div>
									<div class="span3">
											<label for="font_size_menu">Font Size</label>
											<div class="form-group right-glyphicon">
											<input type="text" value="<?php echo $font_size_menu;?>" name="font_size_menu" />
											<span class="form-glyphicon">px</span>
											</div>
									</div>	
									<div class="span3">
											<label for="color_of_menu_font">Font Color</label>
											<div class="form-group left-glyphicon">
											<input style="background:#<?php echo $color_of_menu_font;?>" type="text" value="<?php echo $color_of_menu_font;?>" name="color_of_menu_font" id="color_of_menu_font" />
											<span class="form-glyphicon">#</span>
											</div>
											<script type="text/javascript">
												$(document).ready(function(){
													treodenSetColorPicker('#color_of_menu_font');
												})
											</script>
									</div>
									<div class="span3">
											<label for="color_of_menu_font_hover">Font Color Hover</label>
											<div class="form-group left-glyphicon">
											<input style="background:#<?php echo $color_of_menu_font_hover;?>" type="text" value="<?php echo $color_of_menu_font_hover;?>" name="color_of_menu_font_hover" id="color_of_menu_font_hover" />
											<span class="form-glyphicon">#</span>
											</div>
											<script type="text/javascript">
												$(document).ready(function(){
													treodenSetColorPicker('#color_of_menu_font_hover');
												})
											</script>
									</div>									
								</div>
							</div>
							<h3>Color Setting</h3>
							<div>
								<div class="row-fluid">
									<div class="span3">
										<label for="color_of_menu_backround_top">Gradient Background Color Top</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_menu_backround_top;?>" type="text" value="<?php echo $color_of_menu_backround_top;?>" name="color_of_menu_backround_top" id="color_of_menu_backround_top" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_menu_backround_top');
											})
										</script>
									</div>
									<div class="span3">
										<label for="color_of_menu_backround_bottom">Gradient Background Color Bottom</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_menu_backround_bottom;?>" type="text" value="<?php echo $color_of_menu_backround_bottom;?>" name="color_of_menu_backround_bottom" id="color_of_menu_backround_bottom" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_menu_backround_bottom');
											})
										</script>
									</div>
									<div class="span3">
										<label for="color_of_menu_backround_top_hover">Gradient Background Color Top Of Menu Item When Hover</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_menu_backround_top_hover;?>" type="text" value="<?php echo $color_of_menu_backround_top_hover;?>" name="color_of_menu_backround_top_hover" id="color_of_menu_backround_top_hover" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_menu_backround_top_hover');
											})
										</script>
									</div>
									<div class="span3">
										<label for="color_of_menu_backround_bottom_hover">Gradient Background Color Bottom Of Menu Item When Hover</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $color_of_menu_backround_bottom_hover;?>" type="text" value="<?php echo $color_of_menu_backround_bottom_hover;?>" name="color_of_menu_backround_bottom_hover" id="color_of_menu_backround_bottom_hover" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#color_of_menu_backround_bottom_hover');
											})
										</script>
									</div>
								</div>
								<div class="row-fluid">
									<div class="span3">
											<label for="color_of_menu_lines">Color Of Lines</label>
											<div class="form-group left-glyphicon">
											<input style="background:#<?php echo $color_of_menu_lines;?>" type="text" value="<?php echo $color_of_menu_lines;?>" name="color_of_menu_lines" id="color_of_menu_lines" />
											<span class="form-glyphicon">#</span>
											</div>
											<script type="text/javascript">
												$(document).ready(function(){
													treodenSetColorPicker('#color_of_menu_lines');
												})
											</script>
									</div>
									<div class="span3">
											<label for="color_of_submenu_background">Color Of Submenu Background</label>
											<div class="form-group left-glyphicon">
											<input style="background:#<?php echo $color_of_submenu_background;?>" type="text" value="<?php echo $color_of_submenu_background;?>" name="color_of_submenu_background" id="color_of_submenu_background" />
											<span class="form-glyphicon">#</span>
											</div>
											<script type="text/javascript">
												$(document).ready(function(){
													treodenSetColorPicker('#color_of_submenu_background');
												})
											</script>
									</div>
								</div>
							</div>
						</div>	
			</div>	
			<div id="tab-footer">
						<div class="accordion">
							<h3>Top Footer Content</h3>
							<div>
								<div id="languages-top-footer" class="htabs">
									<?php foreach ($languages as $language) { ?>
									<a href="#language-top-footer<?php echo $language['language_id']; ?>"><img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /> <?php echo $language['name']; ?></a>
									<?php } ?>
								</div>
								<?php foreach ($languages as $language) { ?>
									<div id="language-top-footer<?php echo $language['language_id']; ?>">
										<textarea name="top_footer_content[<?php echo $language['language_id']; ?>]" id="top_footer_content<?php echo $language['language_id']; ?>"><?php echo isset($top_footer_content[$language['language_id']]) ? $top_footer_content[$language['language_id']] : ''; ?></textarea>
									</div>
								<?php } ?>
							</div>
							<h3>Footer Content</h3>
							<div>
								<div id="languages-footer" class="htabs">
									<?php foreach ($languages as $language) { ?>
									<a href="#language-footer<?php echo $language['language_id']; ?>"><img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /> <?php echo $language['name']; ?></a>
									<?php } ?>
								</div>
								<?php foreach ($languages as $language) { ?>
									<div id="language-footer<?php echo $language['language_id']; ?>">
										<textarea name="footer_content[<?php echo $language['language_id']; ?>]" id="footer_content<?php echo $language['language_id']; ?>"><?php echo isset($footer_content[$language['language_id']]) ? $footer_content[$language['language_id']] : ''; ?></textarea>
									</div>
								<?php } ?>
							</div>
							<h3>Backgound</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="background_color_footer">Background Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $background_color_footer;?>" type="text" value="<?php echo $background_color_footer;?>" name="background_color_footer" id="background_color_footer" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#background_color_footer');
										})
									</script>
								</div>
								</div>
							</div>
							<h3>Links</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="link_color_footer">Color of links</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $link_color_footer;?>" type="text" value="<?php echo $link_color_footer;?>" name="link_color_footer" id="link_color_footer" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#link_color_footer');
										})
									</script>
								</div>
								<div class="span3">
									<label for="link_color_footer_hover">Color of links hover</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $link_color_footer_hover;?>" type="text" value="<?php echo $link_color_footer_hover;?>" name="link_color_footer_hover" id="link_color_footer_hover" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#link_color_footer_hover');
										})
									</script>
								</div>
								</div>
							</div>
							<h3>Html Heading ( H1,H2,H3 ...)</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="html_heading_footer_color">Color</label>
									<div class="form-group left-glyphicon">
									<input style="background:#<?php echo $html_heading_footer_color;?>" type="text" value="<?php echo $html_heading_footer_color;?>" name="html_heading_footer_color" id="html_heading_footer_color" />
									<span class="form-glyphicon">#</span>
									</div>
									<script type="text/javascript">
										$(document).ready(function(){
											treodenSetColorPicker('#html_heading_footer_color');
										})
									</script>
								</div>
								<div class="span3">
										<label for="font_of_html_heading_footer">Font Family</label>
										<select name="font_of_html_heading_footer" id="font_of_html_heading_footer">
											<?php echo $font_of_html_heading_footer;?>
										</select>
								</div>
								</div>
							</div>
							<h3>Copyright Text</h3>
							<div>
								<div class="row-fluid">
									<div class="span3">
										<label for="copyright_text">Copyright Text</label>
										<input id="copyright_text" type="text" name="copyright_text" value="<?php echo $copyright_text;?>" />
									</div>
								</div>
							</div>
							<h3>Payment Icons</h3>
							<div>
								<?php
									if (isset($this->request->server['HTTPS']) && (($this->request->server['HTTPS'] == 'on') || ($this->request->server['HTTPS'] == '1'))) {
										$http =  HTTPS_CATALOG . 'image/';
									} else {
										$http =  HTTP_CATALOG . 'image/';
									}
								?>
								<?php if($payment_icons_src) : ?>
								<?php foreach($payment_icons_src as $key=>$value) : ?>
								<?php if($value!='e') :  ?>
								<div class="row-fluid" style="margin-bottom:10px">
									<span style="min-width:100px;display:inline-block"><img src="<?php echo $value ? $http.$value : $no_image;?>" id="payment_icons_src_<?php echo $key;?>"/></span>
									<input type="hidden" name="payment_icons_src[]" value="<?php echo $value; ?>" id="payment-icons-src-<?php echo $key;?>" />
									<a style="padding:0px 10px" href="javascript:void(0);" onclick="image_upload('payment-icons-src-<?php echo $key;?>', 'payment_icons_src_<?php echo $key;?>');">Upload</a>
									<input type="text" value="<?php echo $payment_icons_name[$key];?>" name="payment_icons_name[]" placeholder="Name"/>&nbsp;&nbsp;
									<input type="text" value="<?php echo $payment_icons_link[$key];?>" name="payment_icons_link[]" placeholder="Link"/>&nbsp;&nbsp;
									<a class="btn btn-danger" href="javascript:void(0);" onclick="if($(this).parent().parent().children('.row-fluid').length == 1){$(this).parent().parent().append('<input name=\'payment_icons_src[]\' value=\'e\' type=\'hidden\'/><input name=\'payment_icons_name[]\' value=\'e\' type=\'hidden\'/><input name=\'payment_icons_link[]\' value=\'e\' type=\'hidden\'/>');} $(this).parent().remove();">Remove</a>
								</div>
								<?php endif;?>
								<?php endforeach;?>
								<?php endif?>
								<script>
									function addIcons(obj){
										var index = $(obj).parent().children('.row-fluid').length;
										var html = '<div class="row-fluid" style="margin-bottom:10px">'+
														'<span style="min-width:100px;display:inline-block"><img src="<?php echo $no_image;?>" id="payment_icons_src_'+index+'"/></span>'+
														'<input type="hidden" name="payment_icons_src[]" value="" id="payment-icons-src-'+index+'" />'+
														'<a style="padding:0px 10px" href="javascript:void(0);" onclick=\'image_upload("payment-icons-src-'+index+'", "payment_icons_src_'+index+'");\'>Upload</a>'+
														'<input type="text" value="" name="payment_icons_name[]" placeholder="Name"/>&nbsp;&nbsp;'+
														'<input type="text" value="" name="payment_icons_link[]" placeholder="Link"/>&nbsp;&nbsp;'+
														'<a href="javascript:void(0);" onclick="$(this).parent().remove();">Remove</a>'+
													'</div>';
										$(obj).before(html);			
									}
								</script>
								<a class="btn btn-primary" href="javascript:void(0);" onclick="addIcons(this);">Add</a>
							</div>
						</div>	
			</div>
			<div id="tab-products-block">
						<div class="accordion">
							<h3>Feature Products</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="form-group">
										<label for="featured_product_display_style">Display style</label>
										<select name="featured_product_display_style" id="featured_product_display_style" class="dependent-from">
											<option value="product-grid" <?php if($featured_product_display_style=='product-grid') echo "selected='selected'";?>>Grid</option>
											<option value="grid-carousel" <?php if($featured_product_display_style=='grid-carousel') echo "selected='selected'";?>>Grid With Carousel</option>
											<option value="product-list" <?php if($featured_product_display_style=='product-list') echo "selected='selected'";?>>List</option>
											<option value="list-carousel" <?php if($featured_product_display_style=='list-carousel') echo "selected='selected'";?>>List With Carousel</option>
										</select>
									</div>
								</div>
								<div class="span6">
									<div class="form-group">
										<label for="num_of_products_featured">How many products/slide(Grid Carousel,List Carousel), columns(Grid) ?</label>
										<input name="num_of_products_featured" value="<?php echo $num_of_products_featured;?>" type="text" />
									</div>
								</div>
								</div>
							</div>
							<h3>Lastest Products</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="form-group">
										<label for="lastest_product_display_style">Display style</label>
										<select name="lastest_product_display_style" id="lastest_product_display_style" class="dependent-from">
											<option value="product-grid" <?php if($lastest_product_display_style=='product-grid') echo "selected='selected'";?>>Grid</option>
											<option value="grid-carousel" <?php if($lastest_product_display_style=='grid-carousel') echo "selected='selected'";?>>Grid With Carousel</option>
											<option value="product-list" <?php if($lastest_product_display_style=='product-list') echo "selected='selected'";?>>List</option>
											<option value="list-carousel" <?php if($lastest_product_display_style=='list-carousel') echo "selected='selected'";?>>List With Carousel</option>
										</select>
									</div>
								</div>
								<div class="span6">
									<div class="form-group">
										<label for="num_of_products_lastest">How many products/slide(Grid Carousel,List Carousel), columns(Grid) ?</label>
										<input name="num_of_products_lastest" value="<?php echo $num_of_products_lastest;?>" type="text" />
									</div>
								</div>
								</div>
							</div>
							<h3>Special Products</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="form-group">
										<label for="special_product_display_style">Display style</label>
										<select name="special_product_display_style" id="special_product_display_style" class="dependent-from">
											<option value="product-grid" <?php if($special_product_display_style=='product-grid') echo "selected='selected'";?>>Grid</option>
											<option value="grid-carousel" <?php if($special_product_display_style=='grid-carousel') echo "selected='selected'";?>>Grid With Carousel</option>
											<option value="product-list" <?php if($special_product_display_style=='product-list') echo "selected='selected'";?>>List</option>
											<option value="list-carousel" <?php if($special_product_display_style=='list-carousel') echo "selected='selected'";?>>List With Carousel</option>
										</select>
									</div>
								</div>
								<div class="span6">
									<div class="form-group">
										<label for="num_of_products_special">How many products/slide(Grid Carousel,List Carousel), columns(Grid) ?</label>
										<input name="num_of_products_special" value="<?php echo $num_of_products_special;?>" type="text" />
									</div>
								</div>
								</div>
							</div>
							<h3>Bestsellers Products</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="form-group">
										<label for="bestsellers_product_display_style">Display style</label>
										<select name="bestsellers_product_display_style" id="bestsellers_product_display_style" class="dependent-from">
											<option value="product-grid" <?php if($bestsellers_product_display_style=='product-grid') echo "selected='selected'";?>>Grid</option>
											<option value="grid-carousel" <?php if($bestsellers_product_display_style=='grid-carousel') echo "selected='selected'";?>>Grid With Carousel</option>
											<option value="product-list" <?php if($bestsellers_product_display_style=='product-list') echo "selected='selected'";?>>List</option>
											<option value="list-carousel" <?php if($bestsellers_product_display_style=='list-carousel') echo "selected='selected'";?>>List With Carousel</option>
										</select>
									</div>
								</div>
								<div class="span6">
									<div class="form-group">
										<label for="num_of_products_bestsellers">How many products/slide(Grid Carousel,List Carousel), columns(Grid) ?</label>
										<input name="num_of_products_bestsellers" value="<?php echo $num_of_products_bestsellers;?>" type="text" />
									</div>
								</div>
								</div>
							</div>
							<h3>Product By Category Products</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="form-group">
										<label for="product_category_product_display_style">Display style</label>
										<select name="product_category_product_display_style" id="product_category_product_display_style" class="dependent-from">
											<option value="product-grid" <?php if($product_category_product_display_style=='product-grid') echo "selected='selected'";?>>Grid</option>
											<option value="grid-carousel" <?php if($product_category_product_display_style=='grid-carousel') echo "selected='selected'";?>>Grid With Carousel</option>
											<option value="product-list" <?php if($product_category_product_display_style=='product-list') echo "selected='selected'";?>>List</option>
											<option value="list-carousel" <?php if($product_category_product_display_style=='list-carousel') echo "selected='selected'";?>>List With Carousel</option>
										</select>
									</div>
								</div>
								<div class="span6">
									<div class="form-group">
										<label for="num_of_products_product_category">How many products/slide(Grid Carousel,List Carousel), columns(Grid) ?</label>
										<input name="num_of_products_product_category" value="<?php echo $num_of_products_product_category;?>" type="text" />
									</div>
								</div>
								</div>
							</div>
						</div>	
			</div>	
			<div id="tab-product">
						<div class="accordion">
							<h3>Product Name</h3>
							<div>
								<div class="row-fluid">
									<div class="span3">
										<label>Display Name ? </label>
										<div class="radio">
											<label>
											<input type="radio" name="show_name_product_item" value="yes" <?php if($show_name_product_item=='yes') echo "checked='checked'";?>/> Yes</label>
											<label>
											<input type="radio" name="show_name_product_item" value="no" <?php if($show_name_product_item=='no') echo "checked='checked'";?>/> No</label>
										</div>
									</div>
									<div class="span3">
										<label for="product_name_color">Color Of Product Name</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $product_name_color;?>" type="text" value="<?php echo $product_name_color;?>" name="product_name_color" id="product_name_color" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#product_name_color');
											})
										</script>
									</div>
									<div class="span3">
										<label for="product_name_font_family">Font Family Of Product Name</label>
										<select name="product_name_font_family" class="product_name_font_family" id="product_name_font_family" >
										<?php echo $google_font_product_name_item;?>
										</select>
									</div>
									<div class="span3">
										<label for="product_name_font_size">Font Size Of Product Name</label>
										<div class="form-group right-glyphicon">
										<input type="text" value="<?php echo $product_name_font_size;?>" name="product_name_font_size" id="product_name_font_size" />
										<span class="form-glyphicon">px</span>
										</div>
									</div>
								</div>
							</div>
							<h3>Product Price</h3>
							<div>
								<div class="row-fluid">
									<div class="span3">
										<label for="price_product_color">Color Of Price</label>
										<div class="form-group left-glyphicon">
										<input style="background:#<?php echo $price_product_color;?>" type="text" value="<?php echo $price_product_color;?>" name="price_product_color" id="price_product_color" />
										<span class="form-glyphicon">#</span>
										</div>
										<script type="text/javascript">
											$(document).ready(function(){
												treodenSetColorPicker('#price_product_color');
											})
										</script>
									</div>
									<div class="span3">
										<label for="product_price_font_family">Font Family Of Product Price</label>
										<select name="product_price_font_family" class="product_price_font_family" id="product_price_font_family" >
										<?php echo $google_font_product_price_item;?>
										</select>
									</div>
									<div class="span3">
										<label for="product_price_font_size">Font Size Of Product Price</label>
										<div class="form-group right-glyphicon">
										<input type="text" value="<?php echo $product_price_font_size;?>" name="product_price_font_size" id="product_price_font_size" />
										<span class="form-glyphicon">px</span>
										</div>
									</div>
								</div>
							</div>
							<h3>Display Description</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="show_description_product_item" value="yes" <?php if($show_description_product_item=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="show_description_product_item" value="no" <?php if($show_description_product_item=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Display Rating</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="show_rating_product_item" value="yes" <?php if($show_rating_product_item=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="show_rating_product_item" value="no" <?php if($show_rating_product_item=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Display Add To Wish List</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="show_wishlist_add_product_item" value="yes" <?php if($show_wishlist_add_product_item=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="show_wishlist_add_product_item" value="no" <?php if($show_wishlist_add_product_item=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Display Add To Compare</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="show_compare_add_product_item" value="yes" <?php if($show_compare_add_product_item=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="show_compare_add_product_item" value="no" <?php if($show_compare_add_product_item=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
						</div>	
			</div>				
			<div id="tab-category-page">
						<div class="accordion">
							<h3>Default Display</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="form-group">
										<label for="default_display_catalog">Display style</label>
										<select name="default_display_catalog" id="default_display_catalog" class="dependent-from">
											<option value="product-grid" <?php if($default_display_catalog=='product-grid') echo "selected='selected'";?>>Grid</option>
											<option value="product-list" <?php if($default_display_catalog=='product-list') echo "selected='selected'";?>>List</option>
										</select>
									</div>
								</div>
								<div class="span3 default_display_catalog-product-grid default_display_catalog" style="display:none">
									<div class="form-group">
										<label for="columns_grid_catalog">How many columns ? </label>
										<input type="text" value="<?php echo $columns_grid_catalog;?>" name="columns_grid_catalog" id="columns_grid_catalog" />
									</div>
								</div>
								</div>
							</div>
							<h3>Show Category Name</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="show_catalog_name" value="yes" <?php if($show_catalog_name=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="show_catalog_name" value="no" <?php if($show_catalog_name=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Show Category Image</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="show_catalog_image" value="yes" <?php if($show_catalog_image=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="show_catalog_image" value="no" <?php if($show_catalog_image=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Show Category Descriptions</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="show_catalog_descriptions" value="yes" <?php if($show_catalog_descriptions=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="show_catalog_descriptions" value="no" <?php if($show_catalog_descriptions=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Show Refine Search</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="show_catalog_refine_search" value="yes" <?php if($show_catalog_refine_search=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="show_catalog_refine_search" value="no" <?php if($show_catalog_refine_search=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
						</div>	
			</div>	
			<div id="tab-product-page">
						<div class="accordion">
							<h3>Cloud Zoom</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label>Enable Cloud Zoom ? </label>
									<div class="radio">
										<label>
										<input type="radio" name="enable_cloud_zoom" value="yes" <?php if($enable_cloud_zoom=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="enable_cloud_zoom" value="no" <?php if($enable_cloud_zoom=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Description Tab</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label>Show Description Tab ? </label>
									<div class="radio">
										<label>
										<input type="radio" name="show_description_tab" value="yes" <?php if($show_description_tab=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="show_description_tab" value="no" <?php if($show_description_tab=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Reviews Tab</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label>Show Reviews Tab ? </label>
									<div class="radio">
										<label>
										<input type="radio" name="show_reviews_tab" value="yes" <?php if($show_reviews_tab=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="show_reviews_tab" value="no" <?php if($show_reviews_tab=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Related Products Tab</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label>Show related products tab ? </label>
									<div class="radio">
										<label>
										<input id="show_related_tab_yes" type="radio" name="show_related_tab" value="yes" <?php if($show_related_tab=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input data-hide="show_related_tab_yes" id="show_related_tab_no" type="radio" name="show_related_tab" value="no" <?php if($show_related_tab=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								<div class="span3 show_related_tab_yes dependent">
									<label>Num of columns related products</label>
									<input type="text" value="<?php echo $num_columns_related_products;?>" name="num_columns_related_products" id="num_columns_related_products" />
								</div>
								</div>
							</div>
						</div>
			</div>		
			<div id="layout-config" name="layout_changed">
				<h3 id="select_layout"><?php echo $select_layout;?> : </h3>
				<input id="store_id" type="hidden" name="store_id" value="<?php echo $this->request->get['store_id'];?>" />
				<select id="prepare-layout">
					<option value="0">Select...</option>
					<?php foreach($layouts as $layout) : ?>
						<option value="<?php echo $layout['layout_id']?>"><?php echo $layout['name']?></option>
					<?php endforeach;?>
				</select>
				<div id="result"></div>
			</div>	
			<div id="specia-offers-popup">
						<div class="accordion">
							<h3>Display Popup</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<div class="radio">
										<label>
										<input type="radio" name="display_popup" value="yes" <?php if($display_popup=='yes') echo "checked='checked'";?>/> Yes</label>
										<label>
										<input type="radio" name="display_popup" value="no" <?php if($display_popup=='no') echo "checked='checked'";?>/> No</label>
									</div>
								</div>
								</div>
							</div>
							<h3>Popup Content</h3>
							<div>
								<div id="popup-languages" class="htabs">
									<?php foreach ($languages as $language) { ?>
									<a href="#popup-language<?php echo $language['language_id']; ?>"><img src="view/image/flags/<?php echo $language['image']; ?>" title="<?php echo $language['name']; ?>" /> <?php echo $language['name']; ?></a>
									<?php } ?>
								</div>
								<?php foreach ($languages as $language) { ?>
									<div id="popup-language<?php echo $language['language_id']; ?>">
										<textarea name="popup_content[<?php echo $language['language_id']; ?>]" id="popup_content<?php echo $language['language_id']; ?>"><?php echo isset($popup_content[$language['language_id']]) ? $popup_content[$language['language_id']] : ''; ?></textarea>
									</div>
								<?php } ?>
							</div>
							<h3>Popup Size</h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="width_popup">Width : </label>
									<div class="form-group left-glyphicon">
									<input id="width_popup" name="width_popup" value="<?php echo $width_popup;?>" type="text" />
									<span class="form-glyphicon">px</span>
									</div>
								</div>
								<div class="span3">
									<label for="height_popup">Height :</label>
									<div class="form-group right-glyphicon">
									<input id="height_popup" name="height_popup" value="<?php echo $height_popup;?>" type="text" />
									<span class="form-glyphicon">px</span>
									</div>
								</div>
								</div>
							</div>
							<h3>How long Popup should be shown again after user close it : </h3>
							<div>
								<div class="row-fluid">
								<div class="span3">
									<label for="time_open_again_popup"></label>
									<div class="form-group right-glyphicon">
									<input id="time_open_again_popup" name="time_open_again_popup" value="<?php echo $time_open_again_popup;?>" type="text" />
									<span class="form-glyphicon">hr</span>
									</div>
								</div>
								</div>
							</div>
						</div>	
			</div>				
		</form>
		</div>
	</div>
</div>
<div id="loading" style="display:none">loading...</div>
</div>
<script type="text/javascript"><!--
<?php foreach ($languages as $language) { ?>
CKEDITOR.replace('footer_content<?php echo $language['language_id']; ?>', {
	filebrowserBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserImageBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserFlashBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserImageUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserFlashUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>'
});
CKEDITOR.replace('top_footer_content<?php echo $language['language_id']; ?>', {
	filebrowserBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserImageBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserFlashBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserImageUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserFlashUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>'
});
CKEDITOR.replace('popup_content<?php echo $language['language_id']; ?>', {
	filebrowserBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserImageBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserFlashBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserImageUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserFlashUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>'
});
<?php } ?>
/*CKEDITOR.replace('social_icons_html', {
	filebrowserBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserImageBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserFlashBrowseUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserImageUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>',
	filebrowserFlashUploadUrl: 'index.php?route=common/filemanager&token=<?php echo $token; ?>'
});*/
//--></script>
<script type="text/javascript"><!--.
function image_upload(field, thumb) {
	$('#dialog').remove();
	
	$('#content').prepend('<div id="dialog" style="padding: 3px 0px 0px 0px;"><iframe src="index.php?route=common/filemanager&token=<?php echo $this->session->data['token']; ?>&field=' + encodeURIComponent(field) + '" style="padding:0; margin: 0; display: block; width: 100%; height: 100%;" frameborder="no" scrolling="auto"></iframe></div>');
	
	$('#dialog').dialog({
		title: 'Image Uploader',
		close: function (event, ui) {
			if ($('#' + field).attr('value')) {
				$.ajax({
					url: 'index.php?route=common/filemanager/image&token=<?php echo $this->session->data['token']; ?>&image=' + encodeURIComponent($('#' + field).val()),
					dataType: 'text',
					success: function(data) {
						$('#' + thumb).replaceWith('<img src="' + data + '" alt="" id="' + thumb + '" />');
					}
				});
			}
		},	
		bgiframe: false,
		width: 800,
		height: 400,
		resizable: false,
		modal: false
	});
};
function phare_json_block(opt){
	var result = new Array();
	function treodenJsonobt() { }
	var treodenJsonstr = "[";
	if($(opt).children('.selected').children('div').length == 0){
			var sort_order_start = $(opt).attr('sort_order_start');
			var sort_order_end = $(opt).attr('sort_order_end');
			var span = "span12";
			var e_info = '{"span":"span12","sort_order_start":"'+sort_order_start+'","sort_order_end":"'+sort_order_end+'"}';
			treodenJsonstr = treodenJsonstr + e_info + "]";
	}else{
			
			$(opt).children('.selected').children('div').each(function(index, e){
				var sort_order_start = $(e).attr('sort_order_start');
				var sort_order_end = $(e).attr('sort_order_end');
				var span = $(e).attr('class');
				var e_info = '{"span":"'+span+'","sort_order_start":"'+sort_order_start+'","sort_order_end":"'+sort_order_end+'"}';
				treodenJsonstr = treodenJsonstr + e_info;
				if(index == ($(opt).children('.selected').children('div').length - 1)){
					treodenJsonstr = treodenJsonstr + "]";
				}else{
					treodenJsonstr = treodenJsonstr + ",";
				}
					
			})
	}
	return treodenJsonstr;
}
function treodenFormValidate(){
	var check = 0;
	$('input[type="text"]').each(function(){
		if($(this).val()=='')
			check = 1;
	});
	return check;
}
function treodenFormValidateErrors(){
	var html = "";
	$('input[type="text"]').each(function(){
		if($(this).val()=='');
			{
				html = "<div class='warning'><?php echo $form_error_message;?></div>";
				$(this).css('border', '1px solid red');
				$(this).after("<span class='error'><?php echo $feild_error_message;?></span>");
			}
	});
	$('#form-validate-errors').html(html);
}
function pre_submit(){
		$('.top-content > .sortable > .row-fluid').each(function(index, e){
				var value_block = phare_json_block(e);
				var html = "<input type='hidden' value='" + value_block + "' name='top_fluid[]'/>";
				$(this).append(html);
		});
		$('.bottom-content > .sortable > .row-fluid').each(function(index, e){
				var value_block = phare_json_block(e);
				var html = "<input type='hidden' value='" + value_block + "' name='bottom_fluid[]'/>";
				$(this).append(html);
		});
}
function treodensubmitform(){
	pre_submit();
	$('#form').submit();
	
	/*if(treodenFormValidate()!=1){
		if($('#layout_editor').length == 1)
			pre_submit();
		$('#form').submit();	
	}
	else{
		treodenFormValidateErrors();
	}*/
}

function treodenSetColorPicker(obj){
	$(obj).ColorPicker({
		onSubmit: function(hsb, hex, rgb, el) {
			$(el).val(hex);
			$(el).ColorPickerHide();
		},
		onBeforeShow: function () {
			$(this).ColorPickerSetColor(this.value);
		},
		onChange: function(hsb, hex, rgb, el) {
			$(obj).val(hex);
			$(obj).css('background','#' + hex);
		}
	})
}
$(document).ready(function(){
	$( ".accordion" ).accordion();
	$('#tabs a').tabs(); 
	$('#languages-top-footer a').tabs(); 
	$('#languages-footer a').tabs(); 
	$('#popup-languages a').tabs(); 
	$('#prepare-layout').change(function(){
		var layout_id=$('#prepare-layout').val();
		var layout_name=$("#prepare-layout option:selected").text();
		var store_id=$("#store_id").val();
		$('#select_layout').remove();
		$('#prepare-layout').remove();
		$('#loading').show();
		$.post(  
				"<?php echo $this->url->link('module/treoden_cpanel/ajaxLayout')."&token=".$this->session->data['token'];?>",  
				{layout_id : layout_id, layout_name : layout_name, store_id : store_id},  
				function(responseText){
					$('#loading').hide();
					$("#result").html(responseText);  
				},  
				"html"  
		);  
	});
	$('.dependent-from').each(function(){
		var dependent_class= $(this).attr('id') + "-" +$(this).val();
		$('.'+dependent_class).show();
		$(this).change(function(){
			var hide_class=$(this).attr('id');
			$('.'+hide_class).hide();
			var dependent_class= $(this).attr('id') + "-" +$(this).val();
			$('.'+dependent_class).show();
		})
	});
	$("input:radio").each(function(){
		if($(this).is(':checked')){
			var dependent_class= $(this).attr('id');
			$('.'+dependent_class).show();
		}
		$(this).click(function(){
			if($(this).is(':checked')){
				var hide_class = $(this).attr('data-hide');
				$('.'+hide_class).hide();
				var dependent_class= $(this).attr('id');
				$('.'+dependent_class).show();
			}
		})
	})
})
//--></script>
<style>
.form .dependent{display:none}
</style> 
<?php echo $footer; ?>